<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" v-model="key" @input.trim="search" placeholder="请输入关键字" />
			<ol>
				<li v-for="(item,index) in newList">{{item.name}}</li>
			</ol>
		</div>
	</body>

</html>

<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			// 搜索关键字
			key: '',
			list: [{
					name: '张三丰'
				},
				{
					name: '张四丰'
				},
				{
					name: '张翠山'
				},
				{
					name: '李四'
				},
				{
					name: '杜十娘'
				},
				{
					name: '燕子李三'
				},
				{
					name: '李云龙'
				}
			],
			newList: []
		},
		created() {
			//			this.search();
			this.newList = this.list;
		},
		methods: {
			search() {
				// let key = this.key;
				// let list = this.list.filter(item=> {
				// 	return item.name.indexOf(key) > -1;
				// });
				// this.newList = list || this.list;

				if(!key) {
					this.newList = this.list;
				} else {
					this.newList = this.list.filter(item => {
						return item.name.indexOf(key) > -1;
					});
				}

			}
		}
	})
</script>